<template>
	<view class="content">
		<view class="topBox">
			<image class="headimg" :src="imageUrl" mode=""></image>
			<text>{{name}}</text>
		</view>
		<view class="twoBox">
			<view class="text1">
				<text >我的算力</text>
				<text class="redText">{{adNum}}</text>
			</view>
			<view class="line1"> </view>
			<view class="text2">
				<text>我的积分</text>
				<text class="redText">0</text>
			</view>
			<view class="line2"> </view>
			<button class="btn" @click="showJiLiAd">看广告加算力</button>
		</view>
		<!-- <text>{{"剩余生成次数:"+num}}</text>
		<text>看广告增加免费次数！</text> -->
	</view>
	<Menu style="width: 100%;"></Menu>
</template>

<script>
	import {
		setInfo,
		parseUserData
	} from '../../hook/auth.js'
	import Menu from "../components/menu.vue"
	export default {
		components:{Menu},
		data() {
			return {
				title: 'Hello1',
				imageUrl:"",//头像地址
				adNum:0,//生成次数
				name:"",//名字
			}
		},
		onLoad() {
			this.imageUrl = parseUserData().avatarUrl
			this.name = parseUserData().nickName
			this.adNum = parseUserData().adNum||0
			
			//调起广告
			// setTimeout(()=>{
			// 	this.showTanAd()
			// },1000)
			// 创建实例
			    this.ad = tt.createRewardedVideoAd({
			      adUnitId: "7y5va1nz0omqzzghuf",
			    });
			
			    // 监听错误
			    this.ad.onError((err) => {
			      tt.hideLoading();
			      switch (err.errCode) {
			        case 1004:
			          // 无合适的广告
			          break;
			        default:
			        // 更多请参考错误码文档
			      }
			    });
			
			    // 监听视频播放完成
			    this.ad.onClose((data) => {
			      tt.hideLoading();
				  console.log("1111");
			      if (data.isEnded) {
					let userData =  parseUserData()
					userData.adNum+=1
					setInfo(userData)
					this.adNum = parseUserData().adNum||0
			        console.log("观看了", data.count, "个视频");
			      } else {
			        console.log("未观看完视频");
			      }
			    });
			
			    // do other thing
			    // 卸载 close 事件监听
			    // this.ad.offClose(closeHandler);
			
			    // 预加载资源
			    this.ad.load();
		},
		methods: {
			
			// 处理用户点击激励广告
			  showJiLiAd() {
				tt.showLoading();
				this.ad.show();
			  },
			showTanAd(){
				const interstitialAd = tt.createInterstitialAd({
				  adUnitId: "2z89wsxvupdvrts7d8",
				});

				interstitialAd
				  .load()
				  .then(() => {
				    interstitialAd.show().then(()=>{
						 console.log("广告显示成功");
					}).catch((err)=>{
						console.error("广告组件加载出现问题", err);
					});
				  })
				  .catch((err) => {
				    console.log("adUnitId:2z89wsxvupdvrts7d8",err);
				  })
			}
		}
	}
</script>

<style scoped>
	.twoBox .btn::after{
		border: 0px;
	}
	.twoBox .btn{
		width: 299px;
		height: 48px;
		background: linear-gradient(90deg, #FF3C00, #FF9000);
		border-radius: 24px;
		color: #FFFFFF;
	}
	.line2{
		width: 100%;
		height: 0;
		border-bottom: 1px solid #DDDDDD;
		margin-bottom: 10px;
	}
	.content .twoBox .redText{
		font-weight: 400;
		font-size: 23px;
		line-height: 40px;
		color: #FF3D00;
	}
	.line1{
		display: inline-block;
		width: 0px;
		height: 66px;
		vertical-align: middle;
		border-right: 1px solid #DDDDDD;
	}
	.text1,.text2{
		width: calc(50% - 2px);
		height: 80px;
		padding-top: 20px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
	}
	.twoBox text{
		display: block;
		font-weight: 400;
		font-size: 13px;
		line-height: 30px;
		color: #000000;
		vertical-align: middle;
	}
	.twoBox{
		width: 100%;
		height: 176px;
		z-index: 10;
		padding: 6px ;
		box-sizing: border-box;
		margin-top: -20px;
		background: #FFFFFF;
		border-radius: 14px;
	}
	.topBox text{
		position: absolute;
		top:calc( 50% - 10px);
		left: 100px;
		font-weight: 400;
		font-size: 17px;
		transform: translateY(-50%);
		color: #FFFFFF;
	}
	.topBox{
		position: relative;
		width: 100%;
		height: 118px;
		background: linear-gradient(211deg, #7800FF, #A600E5);
		border-radius: 14px 14px 0px 0px;
	}
	.headimg{
		width: 60px;
		height: 60px;
		margin-top: 20px;
		margin-left: 30px;
		border-radius: 50%;
		vertical-align: middle;
	}
	.content {
		background-color: #000000;
		padding: 10px;
		box-sizing: border-box;
		height:calc(100vh - 70px) ;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
